<script setup>
import { ref,provide } from 'vue'
import CenterCom from '@/components/center-com.vue';

// 1. 跨层传递普通数据
provide('theme-color', 'pink')
// 2. 跨层传递响应式数据
const count = ref(10)
provide('count', count)
// 3. 跨层传递函数，给后代提供修改数据的能力
const changeCount = ((newCount) => {
    count.value = newCount
})
provide('changeCount', changeCount)

</script>

<template>
    <div>
        顶层组件
    </div>
    <CenterCom />
</template>